<template>
  <div v-loading="data.detailLoading">
    <el-tabs v-model="activeName" class="demo-tabs box">
      <el-tab-pane label="流程图" name="1">
        <flowChart :processInstanceId="params.procInsId"></flowChart>
      </el-tab-pane>
      <el-tab-pane label="基本信息" name="2">
        <change title="项目变更详情" ref="changeForm"></change>
      </el-tab-pane>
    </el-tabs>
  </div>
  <div class="dialog-footer" style="float: left" v-if="out == 0">
    <el-form :rules="rules" ref="ruleFormRef" :model="ruleForm">
      <el-form-item label="审批意见" prop="comment">
        <el-input
        type="textarea"
          placeholder="审批意见"
          v-model="ruleForm.comment"
          style="width: 600px"
          clearable
        />
      </el-form-item>
    </el-form>
  </div>

  <div class="dialog-footer" v-if="out == 0" style="float: right">
    <el-button type="primary" @click="handleNoPass">驳回</el-button>
    <el-button type="primary" @click="handlePass">通过</el-button>
  </div>
</template>

<script lang="ts">
import change from '@/views/project/project-manage/change-project/components/change.vue'
import { getDetailById } from '@/views/project/api/project'
import flowChart from '@/components/PublicProcess/Chart/flowChart.vue'
import { allowProcess, refuseProcess } from '@/views/project/api/commom'
import { servicesLoading } from '@/utils/loading'

import { defineComponent, reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'

export default defineComponent({
  components: {
    change,
    flowChart,
  },
  props: {
    params: {
      type: Object,
      default:{} as any
    },
    out: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    const store = useStore()
    const activeName = ref('1') //tab切换
    const ruleForm = reactive({
      comment: '',
    })
    const rules = reactive({
      comment: [{ required: true, message: '请输入审核意见', trigger: 'change' }],
    })
    const ruleFormRef = ref()
    let data = reactive({
      processInstanceId: '',
      currentList: [] as any,
      ids: [],
      editDialog: false,
      currentRow: {} as any,
      dealVisible: false,
      detailLoading: false,
    })

    data.detailLoading = true
    getDetailById({
      id: props.params?.businessKey,
    }).then((res) => {
      data.detailLoading = false
      const resData = res.data.data
      console.log(resData, 'resData')
      data.processInstanceId = resData.processInstanceId
      for (let key in store.state.projectCenter.changeForm) {
        store.state.projectCenter.changeForm[key] = resData[key]
      }
    })
    //审批通过
    const handlePass = () => {
      ruleFormRef.value.validate((valid) => {
        if (valid) {
          ElMessageBox.confirm('确认通过本次申请吗？', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            handleResult(allowProcess, 2)
          })
        }
      })
    }
    //审批驳回
    const handleNoPass = () => {
      ruleFormRef.value.validate((valid) => {
        if (valid) {
          ElMessageBox.confirm('确认驳回本次申请吗？', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            handleResult(refuseProcess, 8)
          })
        }
      })
    }
    const handleResult = (handleProcess, status) => {
      const loading = servicesLoading({ fullscreen: true, text: '正在请求流程' })
      handleProcess({
        procInsId: props.params.procInsId,
        comment: ruleForm.comment,
        flowKey: 'change-project',
        businessKey: props.params?.businessKey,
        businessType: 'YW18',
        random: new Date().valueOf(),
      })
        .then((res) => {
          loading.close()
          if (res.data.code == 200) {
            ElMessage({
              message: '操作成功',
              type: 'success',
            })
          } else {
            ElMessage({
              message: res.data.message,
              type: 'warning',
            })
          }
        })
        .catch(() => {
          loading.close()
        })
    }
    return {
      activeName,
      ruleForm,
      rules,
      ruleFormRef,
      data,
      handlePass,
      handleNoPass,
    }
  },
  beforeUnmount() {
    console.log('beforeUasdasdnmount')
    // this.ruleFormRef.value.resetFields()
  },
})
</script>

<style scoped>
.dialog-footer {
  margin-top: 20px;
}
</style>
